<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item>
        <el-radio-group v-model="queryParams.searchType">
          <el-radio-button label="2">饼图</el-radio-button>
          <el-radio-button label="3">折线图</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item prop="searchValue">
        <el-input
          v-model="queryParams.searchValue"
          placeholder="请输入项目名称"
          clearable
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item >
        <el-date-picker
          v-model="queryDate"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQueryFn">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQueryFn">重置</el-button>
        <el-button type="primary" icon="el-icon-download" @click="exportQueryFn">导出</el-button>
      </el-form-item>
    </el-form>

    <div ref="workhourChart" v-loading="loading" :style="{height:'410px',width:'90%'}" />
  </div>
</template>

<script>
  import echarts from 'echarts';
  import { apiWorkHourStatList, apiExportWorkHourStatList } from "@/api/pmp/api.report";

  export default {
    name: 'workhourChart',
    data () {
      return {
        // 遮罩层
        loading: false,
        // 查询参数
        queryParams: {
          searchType: '2',
          searchValue: undefined,
          startTime: undefined,
          endTime: undefined
        },
        // 时间框查询数据集
        queryDate: [],
        // chart数据
        chart: null
      };
    },
    mounted() {
      this.$nextTick(()=>{
        this.chart = echarts.init(this.$refs.workhourChart);
      });
    },
    methods: {
      exportQueryFn() {
        let query = {...this.queryParams};
        if(this.queryDate || this.queryDate.length > 2){
          query.startTime = this.queryDate[0];
          query.endTime = this.queryDate[1];
        }
        apiExportWorkHourStatList(query).then(
          response => {
            console.log('导出结果', response);
            this.download(response.msg);
          }
        );
      },
      getListFn() {
        let query = {...this.queryParams};
        this.loading = true;
        if(this.queryDate || this.queryDate.length > 2){
          query.startTime = this.queryDate[0];
          query.endTime = this.queryDate[1];
        }
        apiWorkHourStatList(query).then(
          response => {
            this.loadingChartData(response.data, query.searchType);
            this.loading = false;
          }
        );
      },
      /** 搜索按钮操作 */
      handleQueryFn() {
        this.getListFn();
      },
      /** 重置按钮操作 */
      resetQueryFn() {
        this.queryDate = [];
        this.resetForm("queryForm");
        this.chart.clear();
      },
      /** 加载图表方法 */
      loadingChartData(data, type){

        this.chart.clear();
        console.log('统计数据',data);
        if (type == 2) {
          this.pieChartData(data);
          return;
        }
        this.lineChartData(data);
      },
      /** 配置饼图数据 */
      lineChartData(data){
        let option = {
          title: {
            text: '工时报表折线图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['内部成本', '外部成本']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data[0] || []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '内部成本',
              type: 'line',
              stack: '万',
              data: data[1] || []
            },
            {
              name: '外部成本',
              type: 'line',
              stack: '万',
              data: data[2] || []
            }
          ]
        };
        this.chart.setOption(option);
      },
      /** 配置折线图数据 */
      pieChartData(data){
        let arr = [];
        (data || []).forEach(ele => {
          arr.push(ele.name);
        });
        let option = {
          title: {
            text: '工时报表饼图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: arr
          },
          series: [
            {
              name: '工时（小时）',
              type: 'pie',
              radius: '55%',
              center: ['50%', '60%'],
              data: data || [],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        this.chart.setOption(option);

      }


    }
  };
</script>


